<template>
  <u-mask class="mask" :zoom="false" :show="isShow" :custom-style="{ height: tools.clientTopHight(), bottom: 0, top: 'auto' }" @click="closeMask">
    <scroll-view class="scroll" scroll-y @click.stop>
      <view class="content">
        <view class="header">
          成绩打卡
          <image class="close" src="/pagesA/static/image/28.png" @click.stop="isShow = !isShow"></image>
        </view>
        <view class="form flex-direction-column">
          <view class="t2 flex">上传成绩</view>
          <view class="top flex-space-between">
            <view class="left flex">
              <image src="/pagesA/static/image/33.png"></image>
              <text>跑步总用时</text>
            </view>
            <view class="right flex">
              <view class="item flex">
                <input placeholder="0" placeholder-style="color:#BBBBBB" v-model="params.hour" :disabled="props.isUpload == 1" />
                <text>小时</text>
              </view>
              <view class="item flex">
                <input placeholder="0" placeholder-style="color:#BBBBBB" v-model="params.minute" :disabled="props.isUpload == 1" />
                <text>分钟</text>
              </view>
              <view class="item flex">
                <input placeholder="0" placeholder-style="color:#BBBBBB" v-model="params.second" :disabled="props.isUpload == 1" />
                <text>秒</text>
              </view>
            </view>
          </view>
          <view class="top flex-space-between">
            <view class="left flex">
              <image src="/pagesA/static/image/32.png" style="width: 28rpx"></image>
              <text>公里数（KM）</text>
            </view>
            <view class="right flex km">
              <input placeholder="请输入" placeholder-style="color:#BBBBBB" v-model="params.mileage" :disabled="props.isUpload == 1" />
            </view>
          </view>
          <view class="t2 flex">跑步轨迹</view>
          <view class="desc">注：上传您的成绩证明（上传第三方跑步软件的成绩截图）</view>
          <view class="upload flex-center" v-if="props.isUpload == 0" @click="upload">
            <image class="pic" v-if="params.images" mode="aspectFill" :src="params.images"></image>
            <image class="add" v-else src="/static/icon/16.png"></image>
          </view>
          <view class="upload flex-center" v-else>
            <image class="pic" mode="aspectFill" :src="params.images"></image>
          </view>
          <view class="btn" v-if="props.isUpload == 0" @click="saveClick">保存</view>
        </view>
      </view>
    </scroll-view>
  </u-mask>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getUploadAch, getAchievement } from '@/service/api/user'
import tools from '@/utils/tools'
const emit = defineEmits(['close', 'success'])
const props = defineProps({
  isUpload: {
    type: Number,
    default() {
      return 0
    }
  }
})

let isShow = ref(false)

let params = ref({
  hour: '',
  second: '',
  minute: '',
  images: '',
  mileage: '',
  id: 0
})
let info = ref(null)

// 上传
const upload = () => {
  tools.chooseImage().then((res: string[]) => {
    tools.getOssUrl<string[]>(res).then((url: any) => {
      params.value.images = url
    })
  })
}

// 保存按钮
const saveClick = () => {
  if (tools.isObjEmpty(params.value)) return tools.showToast('请填写完整表单信息')
  tools.showModel('提示', '是否确定上传').then(() => {
    // 上传成绩
    getUploadAchApi()
  })
}

// 关闭弹窗
const closeMask = () => {
  isShow.value = false
  emit('close', false)
}

// 获取上传的成绩
const getAchievementApi = async () => {
  const { msg } = await getAchievement({ id: params.value.id })
  console.log('msg', msg)
  info.value = msg
  info.value = { ...info.value.achievement, ...info.value }
  delete info.value.id
  delete info.value.achievement
  Object.keys(params.value).forEach((key) => {
    params.value[key] = info.value[key]
  })
}

// 上传成绩
const getUploadAchApi = async () => {
  const { msg, code } = await getUploadAch(params.value)
  if (code == 0) return tools.showToast(msg)
  tools.showToast('提交成功')
  emit('success')
  setTimeout(() => {
    // 关闭弹窗
    closeMask()
  }, 500)
}

onMounted(() => {
  // getAchievementApi()
})

defineExpose({
  isShow,
  params,
  getAchievementApi
})
</script>

<style lang="scss" scoped>
.scroll {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 612rpx;
  margin: auto;
  max-height: 845rpx;
  position: absolute;
  background-color: #fff;
}
.content {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  display: inline-block;
}
.header {
  width: 100%;
  height: 76rpx;
  color: #333333;
  font-size: 32rpx;
  line-height: 76rpx;
  position: relative;
  text-align: center;
  background-color: #eeeeee;
  border-radius: 10rpx 10rpx 0px 0px;
  .close {
    top: 38rpx;
    right: 38rpx;
    width: 20rpx;
    height: 20rpx;
    position: absolute;
  }
}
.t2 {
  border: none;
  margin-top: 30rpx;
}
.form {
  padding: 0 24rpx;

  .top {
    margin-top: 20rpx;
    padding-bottom: 26rpx;
    border-bottom: 1px solid #eee;
    .left {
      image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }
      text {
        height: 40rpx;
        font-size: 28rpx;
        line-height: 40rpx;
      }
    }
    .km {
      input {
        text-align: right;
      }
    }
    .right {
      .item {
        margin-right: 20rpx;
        input {
          width: 40rpx;
          outline: none;
          text-align: center;
          margin-right: 10rpx;
        }
        text {
          height: 40rpx;
          font-size: 28rpx;
          line-height: 40rpx;
        }
      }
    }
  }
  .desc {
    height: 32rpx;
    color: #999999;
    font-size: 22rpx;
    line-height: 32rpx;
  }
  .upload {
    width: 160rpx;
    height: 160rpx;
    margin-top: 24rpx;
    border-radius: 6rpx;
    border: 1px solid #dddddd;
    background: rgba(252, 252, 252, 0.39);
    .pic {
      width: 100%;
      height: 100%;
      border-radius: 6rpx;
    }
    .add {
      width: 36rpx;
      height: 36rpx;
    }
  }
  .btn {
    width: 100%;
    height: 84rpx;
    color: #fff;
    line-height: 84rpx;
    text-align: center;
    margin-top: 52rpx;
    border-radius: 6rpx;
    background: rgba(230, 66, 94);
  }
}
</style>
